{% extends "main/base.html" %}

{% block head_js %}
<script type="text/javascript">
    function submitform(){
        if (!document.getElementById('id_photo').value) {
            alert("Please select an image to upload.");
            return;
        }
        
        form = document.getElementById('photo_form')
        form.submit();
    }
</script>
{% endblock %}

{% block body %}

{% if image_changed %}
   <p id="title">Your profile image was updated successfully.</p>
   <br />
   <img src="{% url account_image_public_thumb username=member.name is_thumb='thumb/' %}">
{% else %}
    <p id="title" class="login">Change Image -- <b>{{ member.name }}</b></p>
    
    <img src="{% url account_image_public_thumb username=member.name is_thumb='thumb/' %}"
    
    <form id="photo_form" action="{% url account_image_change %}" method="POST" enctype="multipart/form-data" accept-charset="utf-8">{% csrf_token %} 
    <p></p>
    <table>
      {{ form.as_table }}
      <tr><th></th><td></td></tr>
      <tr>
        <th></th>
        <td><input type="button" onclick="submitform()" value="  Upload  "/></td>
      </tr>
    </table> 
    
</form>

{% endif %}

<a href={% url account_settings %}>Settings</a>
<br />
<br />
<a href={% url account_logout %}>Logout</a>

{% endblock %}